<template>
  <div id="page-article">
    <section class="page-header">
      <section class="text-container">
        <h1 class="title">专业会计服务机构</h1>
        <p class="desc">Professional Accounting Service</p>
      </section>
    </section>
    <div class="page-main">
      <section class="article-container">
        <!--<header class="header">-->
          <!--<ul class="tabs">-->
            <!--<li-->
              <!--v-for="tab in tabs"-->
              <!--:key="tab.title"-->
              <!--:class="{active: tab.value === active_tab}"-->
              <!--@click="updateActiveTab(tab)"-->
            <!--&gt;-->
              <!--{{tab.title}}-->
            <!--</li>-->
          <!--</ul>-->
        <!--</header>-->
        <ul
          v-loading="loading"
          element-loading-text="加载中..."
          class="article-list">
          <li v-if="articles.length === 0">暂无数据</li>
          <li
            v-for="article in articles"
            :key="article.id"
          >
            <div class="img-container">
              <ratio-img
                :height="0"
                :src="article.header_url"
              ></ratio-img>
            </div>
            <div class="text-container">
              <h3 class="title">{{article.title}}</h3>
              <div class="content" v-html="article.sub_content"></div>
              <div class="operate">
                <nuxt-link
                  :to="{path: '/article/detail', query: {id: article.id}}"
                >
                  <el-button
                    size="small"
                    type="primary">查看更多
                  </el-button>
                </nuxt-link>
                <span class="date">{{article.create_time}}</span>
              </div>
            </div>
          </li>
        </ul>
        <div class="pagination">
          <paginate
            container-class="paginate"
            prev-class="prev-class"
            next-class="next-class"
            page-class="page-class"
            :page-count="page_count"
            prev-text="上一页"
            next-text="下一页"
            :click-handler="changePage"
          ></paginate>
        </div>
      </section>
    </div>
    <contract-us></contract-us>
  </div>
</template>

<script>
  /**
   * @Author: lifuzhao
   * @Date: 2019-05-13
   * @Project: eabax
   */

  import '../../assets/less/article.less'
  import contractUs from '../../components/contract-us'
  import paginate from '../../components/paginate'
  import ratioImg from '../../components/ratio-img'

  function getList() {
    let { $axios, $route, size } = this,
      query = $route.query
    return $axios
      .$get('/api/v1/informations', {
        params: {
          page: query.page || 1,
          size: size
        }
      })
      .then(res => {
        let total = res.total
        return {
          total,
          articles: res.data || []
        }
      })
  }

  export default {
    name: 'page-article',
    async asyncData({ $axios, route }) {
      let query = route.query
      let data = {
        loading: false,
        total: 0,
        size: 10,
        page: query.page > 1 ? query.page : 1,
        tabs: [{
          title: '全部',
          value: 'all'
        }, {
          title: '常见问题',
          value: 'faq'
        }, {
          title: '创业知识',
          value: 'knowledge'
        }],
        active_tab: ['all', 'faq', 'knowledge'].indexOf(query.t) !== -1 ? query.t : 'all',
        articles: []
      }
      let self = Object.assign({}, data, {
        $axios,
        $route: route
      })
      let total = 0,
        articles = [],
        loaded = false
      try {
        if(!window){
          let { total: total_inner, articles: articles_inner} = await getList.call(self)
          total = total_inner
          articles = articles_inner
          loaded = true
        }
      }catch (e) {}
      return Object.assign(data, { articles, total, loaded })
    },
    computed: {
      page_count() {
        let total = this.total,
          size = this.size
        return Math.ceil(total / size)
      }
    },
    watch: {
      $route: {
        deep: true,
        handler() {
          this.getList()
        }
      }
    },
    mounted(){
      if(!this.loaded){
        this.getList()
      }
    },
    methods: {
      updateActiveTab(tab) {
        this.active_tab = tab.value
      },
      async getList() {
        this.loading = true
        let { total, articles } = await getList.call(this)
        this.loading = false
        this.total = total
        this.articles = articles
      },
      changePage(page) {
        let tab_active = this.active_tab
        this.$router.push({
          path: '/article/list',
          query: {
            t: tab_active,
            page: page
          }
        })
      }
    },
    layout: 'common',
    components: {
      contractUs,
      paginate,
      ratioImg
    }
  }
</script>
